<template>
  <view>
    <view class="sticky">
      <u-tabs :list="tabs" :is-scroll="true" :current="current" @change="change" bg-color="#ce90fc" inactive-color="#f5e5fd"
        active-color="#fdefe6"></u-tabs>
    </view>

    <view class="f-center u-p-32">
      <image src="../../static/icons/jxhh.png" style="width: 442rpx;height: 26rpx;" mode=""></image>
    </view>

    <view class="u-p-24">
      <view class="card" v-for="i in 4" :key="i">
        <view class="shop u-p-b-16">
          <view>谜草集专卖店</view>
          <uni-icons class="u-m-t-8" type="arrowright" size="12"></uni-icons>
        </view>
        <view class="flex-row justify-between">
          <image class="pic" src="https://picsum.photos/id/319/200/200"></image>
          <view style="width: 430rpx;">
            <view class="title u-line-2">1元秒杀,限量抢购,抢完为止!XXXXXXXXXXXXXXXX...</view>
            <view class="u-p-t-12" style="width: 300rpx;">
              <u-line-progress active-color="#ff5020" :percent="70"></u-line-progress>
            </view>
            <view class="flex-row justify-between align-center u-p-t-32">
              <view class="price">
                <view>¥59.9</view>
                <view class="one">单购价￥66.9</view>
              </view>
              <my-btn :size="[120, 50, 20]" bg="linear-gradient(90deg, #7878f6 0%,#e399fe 100% )" color="#fff" round
                inline>立即拼团</my-btn>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        tabs: [{
            name: '即将售罄'
          },
          {
            name: '进行中'
          },
          {
            name: '即将开抢'
          }, {
            name: '即将售罄'
          },
          {
            name: '进行中'
          },
          {
            name: '即将开抢'
          }, {
            name: '即将售罄'
          },
          {
            name: '进行中'
          },
          {
            name: '即将开抢'
          }
        ],
        current: 0,
      };
    },
    methods: {
      change(index) {
        this.current = index;
      },
    }
  }
</script>

<style lang="scss">
  .card {
    width: 702rpx;
    // height: 295rpx;
    background: #FFFFFF;
    border-radius: 12rpx;
    padding: 24rpx;
    margin-bottom: 24rpx;

    .shop {
      font-size: 24rpx;
      display: flex;
      align-items: center;
    }

    .pic {
      width: 181rpx;
      height: 210rpx;
      background: #FFFFFF;
      object-fit: cover;
      border-radius: 12rpx;
    }

    .price {
      color: #FF4500;
      font-size: 32rpx;
      display: flex;
      align-items: flex-end;
    }

    .one {
      color: #000;
      font-size: 20rpx;
      padding-left: 8rpx;
    }
  }
</style>
